<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="/static/styles/bootstrap-5.3.0-alpha1-dist/css/bootstrap.css">
    <title>待办事项列表</title>
    <style>        .is-complete {
            text-decoration: line-through;
        }
        table {
            border-collapse: collapse;
            border: 1px dotted #ccc;
        }

        td, th {
            border: 1px dotted #ccc;
        }
    </style>
    <!-- 引入 jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>        $(document).ready(function () {
            // 绑定表单提交事件
            $('form').on('submit', function (event) {
                event.preventDefault(); // 阻止默认提交行为

                // 使用 AJAX 提交表单
                $.ajax({
                    type: 'POST',
                    url: '/todo/save',
                    data: $(this).serialize(), // 序列化表单数据
                    success: function (response) {
                        // 处理成功的回调
                        console.log(response);
                        // 页面刷新
                        location.reload();
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        // 处理错误的回调
                        console.error('Error:', textStatus, errorThrown);
                        alert('发生错误，请重试');
                    }
                });
            });
        });
    </script>
</head>
<body>

<main class="container">
    <div style="display: flex; justify-content: flex-end;">
        当前用户名: ${username!""} | <a href="/logout">退出登录</a>
    </div>
    <form action="/todo/save" method="post">
        <div class="field">
            <label for="content">内容</label>
            <input type="text" name="content" placeholder="请输入待办事项内容" required />
            <select name="contenttype" placeholder="请选择待办事项内容类型" required>
                <option value="1">学习</option>
                <option value="2">生活</option>
                <option value="3">工作</option>
                <option value="4">娱乐</option>
                <option value="5">其他</option>
            </select>
            <input type="submit" class="btn btn-success btn-sm" value="新建">
        </div>
    </form>

    <table class="table table-striped">
        <tr>
            <th>编号</th>
            <th>内容</th>
            <th>内容类型</th>
            <th>完成情况</th>
            <th>操作1</th>
            <th>操作2</th>
            <th>操作3</th>
            <th>创建时间</th>
            <th>更新时间</th>
        </tr>
        <#list todoList as todo>
            <tr>
                <td>${todo.id}</td>
                <td <#if (todo.complete)>class="is-complete"</#if>>${(todo.content)!""}</td>
                <td>${todo.contenttype}</td>
                <td><input type="checkbox" ${todo.complete?string('checked','')} onchange="window.location.href='/todo/check?id=${todo.id}'"></td>
                <td><a href="/todo/check?id=${todo.id}">☑切换</a></td>
                <td><a href="/todo/edit?id=${todo.id}">✒编辑</a></td>
                <td><a href="/todo/delete?id=${todo.id}">❌删除</a></td>
                <td>
                    <#if todo.createAt??>
                        ${todo.createAt}
                    <#else>
                    </#if>
                </td>
                <td>
                    <#if todo.updateAt??>
                        ${todo.updateAt}
                    <#else>
                    </#if>
                </td>
            </tr>
        </#list>
        <tr>
            <td><a href="/todo/list?pre=1">上一页</a></td>
            <td><a href="/todo/list?next=1">下一页</a></td>
        </tr>
    </table>
</main>
</body>
</html>